<template>
  <div class="app-container home">
    <searchForm
      class="searchMain"
      size="medium"
      :isHandle="isHandle"
      :label-width="labelWidth"
      :label-position="labelPosition"
      :search-data="searchData"
      :search-form="searchForm"
      :search-handle="searchHandle"
    ></searchForm>
    <tableForm
      :columObj="columObj"
      :pageObj="pageObj"
      @handleSizeChange="handleSizeChange"
      @handleCurrentChange="handleCurrentChange"
    >
      <!-- <template v-slot:operation="scopeVal">
        <el-button type="text" size="medium" @click="yuTap(scopeVal.scope.row.enclosure)"

          >详情</el-button
        >
      </template> -->
    </tableForm>

    <el-dialog
      :visible="showDoc == true || showPdf == true || showImg == true"
      :show-close="true"
      :width="'80%'"
      class="dialog-div-pre-style"
      :before-close="closePreviewClick"
      center
      title="预览"
    >
      <div v-if="showImg == true" class="dialog-body-content-base-style">
        <img :src="images" style="width: 100%" />
      </div>
      <div v-if="showDoc == true" class="dialog-body-content-base-style">
        <!-- <iframe frameborder="0" :src="fileUrl" width="100%" height="450px">
        </iframe> -->
        <iframe
          :src="`https://view.officeapps.live.com/op/view.aspx?src=${fileUrl}`"
          width="100%"
          height="450px"
          frameborder="1"
        />
        <!-- <a :href="fileUrl"></a> -->
      </div>
      <div
        v-if="showPdf == true"
        class="dialog-body-content-base-style"
        style="justify-content: center; align-items: center"
      >
        <pdf
          ref="pdf"
          :src="pdfUrl"
          :page="currentPage"
          @num-pages="pageCount = $event"
          @page-loaded="currentPage = $event"
          @loaded="loadPdfHandler"
        >
        </pdf>
        <div style="text-align: center; font-size: 20px">
          <span
            @click="changePdfPage(0)"
            class="turn"
            :class="{ grey: currentPage == 1 }"
            >上一页</span
          >
          {{ currentPage }} / {{ pageCount }}
          <span
            @click="changePdfPage(1)"
            class="turn"
            :class="{ grey: currentPage == pageCount }"
            >下一页</span
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>
  
<script>
import tableForm from "../../components/baseTable/index.vue";
import searchForm from "../../components/baseSearchForm/index.vue";
import pdf from "vue-pdf";
import { dateTypeFormat, formatDateTime } from "../../utils/index";
import {list} from "@/api/appoint";


export default {
  name: "Index",
  components: {
    tableForm,
    searchForm,
    pdf,
  },
  data() {
    return {
      isHandle: true,
      labelWidth: "100px",
      labelPosition: "right",
      searchData: {
        dataTime: [
          dateTypeFormat(
            "YYYY-mm-dd",
            new Date(new Date().getFullYear(), new Date().getMonth(), 1)
          ),
          dateTypeFormat("YYYY-mm-dd", new Date()),
        ],
      },
      searchForm: [
        {
          type: "daterange",
          label: "日期：",
          prop: "dataTime",
          placeholder: "请选择",
        },
      ],
      searchHandle: [
        // { label: "重置", type: "plain",icon:'el-icon-refresh-right', handle: this.resetForm },
        {
          label: "查询",
          type: "primary",
          icon: "el-icon-search",
          handle: this.handleSearch,
        },
      ],
      columObj: {
        // 选择框
        loading: false, //是否加载
        isSerial: true, //是否需要序列
        isSelect: false, //是否需要复选框
        isPagination: true, //是否需要分页
        // isOperation: true, //是否需要操作栏
        tableData: [], //表格数据来源
        tableCol: [
          {
            label: "消息",
            prop: "message",
          },
          {
            label: "任免职文件号",
            prop: "fileNumber",
          },
          {
            label: "职务",
            prop: "professional",
          },
          {
            label: "任职日期",
            prop: "employmentDate",
            ownDefined: true,
            ownDefinedReturn: (row, $index) => {
              if (row.employmentDate == 0) {
                return "1970-01-01";
              } else {
                return formatDateTime(row.employmentDate);
              }
            },
          },
          // {
          //   label: "状态",
          //   prop: "status",
          // },
        ],
      },
      pageObj: {
        //分页对象
        total: 0,
        pageData: {
          pageNum: 1,
          pageSize: 10,
        },
      },
      showDoc: false, //判断如果是否为word文件显示
      showPdf: false, //判断如果是否为pdf文件显示
      showImg: false, //判断如果是否为图片显示
      fileUrl: "", //pdf链接
      images: "", //图片链接
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      pdfUrl: "", //pdf链接
      baseUrl: process.env.VUE_APP_BASE_API,
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    // 获取数据列表
    getList() {
      try {
        let params = {
          pageNum: this.pageObj.pageData.pageNum,
          pageSize: this.pageObj.pageData.pageSize,
          startTime: this.searchData.dataTime[0],
          endTime: this.searchData.dataTime[1],
        };
        list(params).then((res) => {
          this.columObj.tableData = res.data;
          this.pageObj.total = res.data.length
        });
      } catch (error) {
        console.log(error);
      }
    },
    handleCurrentChange(val) {
      this.pageObj.pageData.pageNum = val;
      this.getList();
    },
    //条数变化
    handleSizeChange(val) {
      this.pageObj.pageData.pageSize = val;
      this.pageObj.pageNum = 1;
      this.getList();
    },
    yuTap(item) {
      var the = this;
      var fie = this.baseUrl + item; //文件路径有域名不需拼接,没有需要拼接一下
      var type = item.split(".")[item.split(".").length - 1];
      if (type == "jpg" || type == "png" || type == "jpeg") {
        the.images = fie;
        the.showImg = true;
      } else if (type == "pdf") {
        the.loadPdfHandler(); //重置pdf第一页展示
        the.pdfUrl = fie;
        the.showPdf = true;
      } else if (type == "doc" || "docx") {
        // the.showDoc = true;
        //word预览
        // the.fileUrl = fie;
        window.location.href = fie;
      }
    },
    closePreviewClick() {
      if (this.showDoc == true) {
        this.showDoc = false;
      } else if (this.showPdf == true) {
        this.showPdf = false;
      } else if (this.showImg == true) {
        this.showImg = false;
      }
    },
    changePdfPage(val) {
      //pdf上一页下一页操作
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    handleSearch() {
      this.getList()
    },
  },
};
</script>
  
  <style scoped lang="scss">
</style>
  
  